<template>
  <div>
    <div class="flex">
      助记词
      <button @click="createMnemonicPhrase">生成助记词</button>
    </div>
    <div>{{ mnemonicPhrase }}</div>
    <div class="flex">
      派生钱包
      <button @click="deriveWallet">生成派生钱包</button>
    </div>
    <div v-for="i in deriveWalletList" :key="i.address">{{ i.address }}</div>
    <button @click="mnemonicDecryption">助记词解密</button>
  </div>
</template>

<script setup>
import { HDNodeWallet, formatEther, JsonRpcProvider, Wallet } from 'ethers';
const mnemonicPhrase =
  'matrix faculty attack when afraid drift night lend refuse upset budget light weekend satisfy quantum vanish spray brick rabbit post debate obtain earth snow';
let deriveWalletList = ref([]);
const provider = new JsonRpcProvider(import.meta.env.VITE_INFURA_LOCAL);
let jsonPws;
let wallet;
// const provider = new ethers.BrowserProvider(window.ethereum);
function createMnemonicPhrase() {}
async function createWallet() {
  // if (localStorage.getItem('wallet')) {
  wallet = HDNodeWallet.fromPhrase(mnemonicPhrase, "m/44'/60'/0'/0/0");
  localStorage.setItem('wallet', JSON.stringify(wallet));
  // } else {
  //   wallet = JSON.parse(localStorage.getItem('wallet'));
  // }
  jsonPws = await wallet.encrypt('123456');
  console.log('wallet', wallet, jsonPws, Array(20).fill(1));
}
createWallet();
function deriveWallet() {
  for (let index = 0; index < 10; index++) {
    deriveWalletList.value.push(wallet.derivePath(`${index + 1}`));
  }
  console.log(deriveWalletList);
}
async function mnemonicDecryption() {
  let walletPws = await Wallet.fromEncryptedJson(jsonPws, '123456');
  console.log('pws', walletPws);
}
</script>

<style scoped>
.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
